<template>
	<Scroll class="recommend" :data="discList" ref="scroll">
		<div>
			<!-- 轮播 -->
			<div class="swiper-container">
        <swiper v-if="banner.length" class="swiper-wrapper" :options="swiperOption" ref="mySwiper">
          <swiperSlide class="swiper-slide" v-for="(item,index) in banner" :key="index">
            <!-- <a :href="item.linkUrl"> -->
              <img @load="imgOnload" :src="item.picUrl" alt="">
            <!-- </a> -->
          </swiperSlide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
			<!-- 推荐歌单（标题） -->
			<div class="gedanTitle" v-show="discList">热门歌单推荐</div>
			<ul v-if="discList.length" class="discList-ul" ref="discListUl">
        <li @click="selectItem(item)" class="discList-li" v-for="(item,index) in discList" :key="index">
          <img v-lazy="item.imgurl" alt="歌单" :title="item.creator.name">
          <div class="discList-con">
            <h2>{{item.creator.name}}</h2>
            <p>{{item.dissname}}</p>
          </div>
        </li>
      </ul>
		</div>
		<!-- 没有数据时显示加载状态 -->
		<div class="loading" v-show="discList.length===0 ? 1:0">
			<Loading />
		</div>
		<!-- 子路由 -->
		<router-view></router-view>
	</Scroll>
</template>

<script>
import Loading from 'base/loading/Loading'
import Scroll from 'base/scroll/Scroll'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { mapMutations, mapGetters } from 'vuex'

import 'swiper/dist/css/swiper.css'
import { getRecommend, getDiscList } from 'api/recommend'
import { playlistMixin } from 'assets/js/mixin'
import { ERR_OK } from 'api/config'

export default {
	mixins: [playlistMixin],
	components: {
    swiper,
    swiperSlide,
		Loading,
		Scroll
	},
	data() {
		return {
			banner: [],
      discList: [],
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          type: "progressbar"
        },
        autoplay: true,
        loop: true
      }
		}
	},
  created() {
    this._getRecommend()
    this._getDiscList()
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    },
    ...mapGetters(["playlist"])
  },
  methods: {
    handlePlaylist(playlist) {
      if (this.$refs.discListUl) {
        const bottom = playlist.length > 0 ? "60px" : ""
        this.$refs.discListUl.style.paddingBottom = bottom
        this.$refs.scroll.refresh()
      }
    },
    _getRecommend: function() {
      var that = this
      // 获取轮播图数据
      getRecommend().then(res => {
        if (res.code === ERR_OK) {
          that.banner = res.data.slider
        }
      })
    },
    _getDiscList() {
      var that = this
      // 获取歌单
      getDiscList().then(res => {
        if (res.code === ERR_OK) {
          that.discList = res.data.list
        }
      })
    },
    imgOnload() {
      if (!this.checkloaded) {
        this.checkloaded = true
        this.$refs.scroll.refresh()
      }
    },
    // 推荐个点详情
    selectItem(item) {
      this.$router.push({
        path: `/recommend/${item.dissid}`
      })
      this.setDisc(item)
    },
    ...mapMutations({
      setDisc: "SET_DISC"
    })
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
.recommend {
  width: 100vw;
  height: 86vh;
  overflow: hidden;
}
.swiper-container {
  width: 100%;
  height: rem(150);
  background: #fff;
}
.swiper-container img {
  width: 100%;
  height: rem(150);
}
.gedanTitle {
  width: 100%;
  height: rem(65);
  text-align: center;
  line-height: rem(65);
  color: $font-color;
  font-size: rem(15);
  letter-spacing: rem(2);
}
.discList-ul {
  width: 100%;
}
.discList-li {
  width: 100%;
  min-height: rem(80);
  box-sizing: border-box;
  padding: 0 rem(20) rem(20) rem(20);
  position: relative;
}
.discList-li img {
  width: rem(60);
  height: rem(60);
  border-radius: rem(5);
  position: absolute;
}
.discList-con {
  padding-left: rem(80);
}
.discList-con h2 {
  margin-bottom: rem(10);
  color: #fff;
  font-size: rem(15);
  padding-top: rem(6);
}
.discList-con p {
  color: rgba(255, 255, 255, 0.3);
  font-size: rem(14);
}
.loading {
  position: fixed;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
</style>